<template>

<div class="bg-login">

     <div class="login-box">
    <h2>登陆界面</h2>
<el-form :model="signup" :rules="rules" ref="signup" label-width="80px">
<el-form-item label="姓名" prop="username">
    <el-input v-model="signup.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="signup.password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="signup.checkPass"></el-input>
  </el-form-item>
  
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="signup.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="loginup('signup')" size="small">提交</el-button>
    <el-button @click="resetForm('signup')" size="small">重置</el-button>
  </el-form-item>
</el-form>

</div>
</div>

  
</template>

<script>
export default {

    
    data(){
         var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.signup.checkPass !== '') {
            this.$refs.signup.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.signup.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };


        return{
            signup:{
                username:"",
                password:"",
                email:""
            },
            rules:{
                // password:[{validator:validatePass,trigger:"blur"}],
                checkPass:[{validator:validatePass2,trigger:"blur"}]
            }
        }
    },
    methods:{
        loginup(data){
            this.$refs[data].validate((valid)=>{
                if(valid){
                    this.$axios.post("/login/signup",this.signup).then(res=>{
                    this.$message({
                        type:"success",
                        message:"编辑信息成功"
                    })
                    
                })
                    this.signup={}
                    this.$router.push('/signin')
                }else{
                    alert("登陆错我")
                    return false
                }
            })
            
        },
        resetForm(data){
             this.$refs[data].resetFields();
        }
    }
}
</script> 
<style scoped>
.bg-login{
  height: 100%;
  width: 100%;
	background:url('../assets/login.jpg')  no-repeat center center;
  background-size: cover;
  /* 把背景扩展足够大 覆盖背景区域 */
}
.login-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 400px;
	padding:20px 30px 20px 10px;
	background: rgba(0,0,0,.8);
	box-sizing: border-box;
	box-shadow: 0 15px  25px rgba(0,0,0,.5);
	border-radius: 10px;
    color: #fff;
}
.login-box h2{
	margin: 0 0 30px;
	padding: 0;
	text-align: center;
	color: #fff;
}
</style>